<template>
    <div class="charts">
        <v-chart :option="getOption()" autoresize></v-chart>
    </div>
</template>

<script setup lang="ts">
// echarts配置项
const getOption = () => {
  return {
    xAxis: {
    min:0,
    max:100,
    
    //   x轴隐藏
      show:false
    },
    yAxis: {
        type: "category",
        // y轴隐藏
        show:false
    },
    series:{
        type:'bar',
        data: [33],
        // 柱状图的宽度
        barWidth:10,
        backgroundStyle:{
            color:'#ccc'
        },
        //柱条的颜色
      showBackground:true,//设置柱条的背景颜色，需要变为真
      itemStyle: {
        color:'pink'
      },
        // 显示数值
        label:{
           show:true,
           position:'right',
        //    自定义数值
        formatter:'|',
           color:'black',
        },
    },
    // 布局
    grid:{
    left:0,
    top:0,
    right:0,
    bottom:0,
    show:true,
     //图标底层的颜色
     backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "yellowgreen", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "skyblue", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },

    },
  
  };
};

// 接受父组件传递过来的props
// let props = defineProps(["data"]);
</script>

<style scoped>

    .charts {
        width: 100%;
        height: 100%;
      }
</style>